<template>
  <div class="content_width basic_info_con">
    <UserInfo></UserInfo>
    <div class="left_con">
      <LeftMenu :menuItemId="menuItemId"></LeftMenu>
    </div>
    <div class="right_con">
      <div class="top_con">
        <Breadcrumb separator=">" class="r_l_width">
          <BreadcrumbItem to="/PatientList">病例库</BreadcrumbItem>
          <BreadcrumbItem>基本信息</BreadcrumbItem>
        </Breadcrumb>
        <div class="r_r_width">
          <span>患者姓名：</span>
          <span>PID：2020072101ZZHH</span>
        </div>
        <div class="r_r_txt">病例概览</div>
      </div>
      <div class="main_con">
        <Row>
          <Col span="12">
            <span class="m_left left_choose">患者编号</span>
            <span class="m_right">
              <Input v-model="valueNumber" placeholder="请输入患者编号" style="width: 200px" />
            </span>
          </Col>
          <Col span="12">
            <span class="m_left left_choose">病案号</span>
            <span class="m_right">
              <Input v-model="valueRecord" placeholder="请输入病案号" style="width: 200px" />
            </span>
          </Col>
          <Col span="12">
            <span class="m_left left_choose">主诊组</span>
            <span class="m_right">
              <Select v-model="model1" style="width:200px">
                <Option
                  v-for="item in cityList"
                  :value="item.value"
                  :key="item.value"
                >{{ item.label }}</Option>
              </Select>
            </span>
          </Col>
          <Col span="12">
            <span class="m_left left_choose">性别</span>
            <span class="m_right">
              <Select v-model="model2" style="width:200px">
                <Option
                  v-for="item in sexList"
                  :value="item.value"
                  :key="item.value"
                >{{ item.label }}</Option>
              </Select>
            </span>
          </Col>
          <Col span="12">
            <span class="m_left left_choose">出生日期</span>
            <span class="m_right">
              <DatePicker type="date" :value="birthData" placeholder="请选择出生日期" style="width: 200px"></DatePicker>
            </span>
          </Col>
          <Col span="12">
            <span class="m_left left_choose">首次确诊日期</span>
            <span class="m_right">
              <DatePicker type="date" :value="value1" placeholder="请选择首次确诊日期" style="width: 200px"></DatePicker>
            </span>
          </Col>
          <Col span="24">
            <span class="m_left left_choose">首次确诊年龄</span>
            <span class="m_right">
              <Input v-model="valueAge" placeholder="请输入首次确诊年龄" style="width: 200px" />
            </span>
          </Col>
          <Col span="12">
            <span class="m_left left_choose">入本登记研究信息</span>
            <span class="m_right">
              <Input v-model="valueInfo" placeholder="请输入入本登记研究信息" style="width: 200px" />
            </span>
          </Col>
          <Col span="12">
            <span class="m_left left_choose">队列类型</span>
            <span class="m_right">
              <Select v-model="model3" style="width:200px">
                <Option
                  v-for="item in queueList"
                  :value="item.value"
                  :key="item.value"
                >{{ item.label }}</Option>
              </Select>
            </span>
          </Col>
          <Col span="12">
            <span class="m_left left_choose">有无参加临床试验</span>
            <span class="m_right">
              <RadioGroup v-model="test">
                <Radio label="有"></Radio>
                <Radio label="无"></Radio>
              </RadioGroup>
            </span>
          </Col>
        </Row>
      </div>
    </div>
  </div>
</template>

<script>
import UserInfo from "@/components/userInfo";
import LeftMenu from "@/components/leftMenu";

export default {
  components: {
    UserInfo,
    LeftMenu,
  },
  data() {
    return {
      cityList: [
        {
          value: "hxs",
          label: "胡兴胜教授组",
        },
      ],
      sexList: [
        {
          value: "1",
          label: "男",
        },
        {
          value: "2",
          label: "女",
        },
      ],
      queueList: [
        {
          value: "1",
          label: "前瞻性队列",
        },
      ],
      menuItemId: '1',
      model1: "hxs",
      model2: "1",
      model3: "1",
      test: "无",
      valueAge: "67",
      valueInfo: "",
      valueNumber: "2020072101ZZHH",
      valueRecord:'2017629',
      value1:'2020-07-21',
      birthData:'1953-05-14'
    };
  },
  mounted() {
    this.menuItemId = this.$route.params.id 
  },
};
</script>

<style lang="less" scope>
.basic_info_con {
  .left_con {
    width: 240px;
    float: left;
  }
  .right_con {
    margin-left: 260px;
  }
}
</style>